/**
 * webpack的配置文件名 webpack.config.js  命令行：  webpack
 * 
 * webpack的配置文件名不是默认的, webpack --config 配置文件名的路径
 * 
 * webpack --config webpack.dev.js --watch(监听)
 * 
 * webpack基于nodejs环境
 * 
 * 二、webpack四大核心：
 * 
 * 1>entry  入口
 * 
 * 数据类型:string|object|array
 * 
 * 2>output 出口
 * 
 * {
 *    filename:
 * 
 *    path: 必须是绝对路径 ：path.resolve(__dirname,'./dist') 
 * 
 *    __dirname:webpack命令的执行路径
 * }
 * 
 * 默认：dist/main.js
 * 
 * 3>loader 加载器  webpack本身只能识别js 
 * 
 * -----------------------------------------------------------------
 * 1）ES6 --> ES5  babel-loader 
 * 
 * 2）css   sass-loader node-sass  css-loader  style-loader
 * 
 *          extract-text-webpack-plugin@next 插件
 * 
 * rules:[{
        test:/\.scss$/,
        // use:['style-loader','css-loader','sass-loader']   //从右向左

        use:ExtractText.extract({
            fallback:'style-loader',
            use:['css-loader','sass-loader']
        })
    }]

    plugins:[
        new ExtractText({
            filename:'css/[name].css'
        })
    ]

    3)图片
    ------------------------------------------------------------------
 * 
 * 
 * 4>plugin 插件  内置插件 外部插件 
 * 
 * html-webpack-plugin
 * 
 * mode:development（不会压缩）  production（会压缩）
 * 
 * 可以命令行：webpack --mode production/development
 * 
 * 
 * 可以在配置文件：
 * {
 *      mode:'development'
 * }
 * 
*/

/**
 * 配置文件
 * 
 * webpack-merge  合并配置项
 * 
 * 开发环境  1> + 2>
 * 
 * 线上环境  1> + 3>
 * 
 * -------------
 * 
 * 1>基础配置            webpack.base.conf.js
 * 
 * 2>开发环境配置        webpack.dev.conf.js
 * 
 *  模块热更新  css style-loader
 * 
 *  devServer
 * 
 *  mode:'development'
 * 
 *  devtool
 * 
 * 3>线上环境配置        webpack.prod.conf.js
 * 
 *  抽离css文件
 * 
 *  mode:'production'
 * 
 * 
*/

const path  = require('path');

const ExtractText = require('extract-text-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

module.exports = {
    entry:{
        index:'./src/js/index.js',
        detail:'./src/js/detail.js'
    },
    output:{
        filename:'./js/[name].[hash].js',
        path:path.resolve(__dirname,'./dist')
    },
    module:{
        rules:[
            // {
            //     test:/\.js$/,
            //     loader:'babel-loader'
            // }

            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        "presets": ["@babel/preset-env"]
                    }
                }
            },
            {
                test:/\.scss$/,
                // use:['style-loader','css-loader','sass-loader']   //从右向左

                use:ExtractText.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader']
                })
            },
            {
                test:/\.(png|jpg|gif|svg)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:1000,  
                        //1000就是1kb，小于这个大小时，会转成base64格式加载，否则以图片方式加载
                        name:'imgs/[name].[ext]',
                        publicPath:'/'
                    }
                }
            },
            {
                test:/\.html$/,
                use:{
                    loader:'html-loader',
                    options:{
                        filename:'imgs/[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin('./dist'),
        new ExtractText({
            filename:'css/[name].css',
            // disable:false
        }),
        new HtmlWebpackPlugin({
            template:'./src/index.html',  //配置模板
            title:'首页',
            // inject:false   //是否注入css和js
            filename:'index.html',
            chunks:['index']
        }),
        new HtmlWebpackPlugin({
            template:'./src/detail.html',  //配置模板
            title:'详情',
            // inject:false   //是否注入css和js
            filename:'detail.html',
            chunks:['detail']
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        port:9090,   //端口号
        // open:true,
        host:'localhost',
        before(app){  //拦截前端请求
            app.get('/api/list',(req,res,next) =>{
                res.json({code:1,data:'list'})
            })
            app.get('/api/swiper',(req,res,next) => {
                res.json({code:1,data:'swiper'})
            })
        },
        proxy:{  //代理
            '/classify':'http://localhost:3000'
        },
        hot:true
    },
    devtool:'cheap-module-eval-source-map',
    resolve:{
        alias:{
            '@':path.resolve(__dirname,'./src/scss'),
            'indSass$':path.resolve(__dirname,'./src/scss/index.scss')
        },
        extensions: [".js", ".scss"]
    }
}


/**
 * devServer  插件webpack-dev-server
 * 
 * 下载：webpack-dev-server
 * 
 * 执行的命令:webpack-dev-server   它的文件都在内存中，没有真正生成
 * 
 * clean-webpack-plugin  删除指定文件
 * 
 * plugins:[
 *     new 
 * ]
 * 
 * 
 * resolve:{  //简化路径
 *          alias:
 * 
 *          extensions: [".js", ".scss"]  //自动识别文件后缀
 * }
 * 
*/


